import React from 'react';
import { connect } from 'react-redux';
import { LeftCircleTwoTone } from '@ant-design/icons';
import moment from 'moment';
import * as utils from '../../../assets/js/utils/index';
import * as Request from '../../../services/home/radar/index';
import Css from '../../../assets/css/home/sate/classify.css';

class ClassifyIndex extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            tabs: [],
            products: {}
        }
        this.timer = null;
    }

    componentDidMount(){
        const { sateData } = this.props.sate;
        if(sateData && sateData.length > 0){
            sateData.map((item, index) => item.checked = index === 0 ? true : false);
            this.setState({ tabs: sateData }, () => {
                this.getClassifyData(sateData[0].sate_type);
            });
        }
    }

    UNSAFE_componentWillReceiveProps(nextProps){
        if(nextProps.sate.checked !== this.props.sate.checked){
            setTimeout(() => this.carousel(), 0);
        }
    }

    //产品类型切换
    changeTab(index){
        const aTempTabs = utils.deepClone(this.state.tabs);
        aTempTabs.map(item => item.checked = false);
        aTempTabs[index].checked = true;
        this.setState({ tabs: aTempTabs }, () => {
            this.getClassifyData(aTempTabs[index].sate_type);
        });
    }

    //获取实况产品数据
    getClassifyData(type){
        const startMoment = this.props.sate.startTime || moment().subtract(2, 'hour');    
        const endMoment = this.props.sate.endTime || moment();
        const startTime = moment(startMoment).format('YYYY-MM-DD HH:mm:ss');
        const endTime = moment(endMoment).format('YYYY-MM-DD HH:mm:ss');
        Request.getClassifyData({ type, startTime, endTime }).then(res => {
            if(res.retcode === '1'){
                const products = { glb: res.glb || [], pro: res.pro || [] };
                this.setState({ products }, () => {
                    this.carousel();
                });
            }else{
                clearInterval(this.timer);
                this.setState({ products: {} });
            }
        });
    }

    //轮播展示卫星产品数据
    carousel(){
        clearInterval(this.timer);
        const bChecked = this.props.sate.checked ? 'glb' : 'pro';
        const aTempSateList = utils.deepClone(this.state.products);
        if(aTempSateList[bChecked] && aTempSateList[bChecked].length > 0){
            this.timer = setInterval(() => {
                const data = aTempSateList[bChecked];
                const shiftData = data.shift();
                data.push(shiftData);
                this.setState({ products: aTempSateList });
            }, 2000);
        }
    }

    //页面退回
    goBack(){
        this.props.history.goBack();
    }

    componentWillUnmount(){
        clearInterval(this.timer);
        this.setState = (state, callback) => { 
            return ; 
        }
    }

    render(){
        const { tabs, products } = this.state;
        const bChecked = this.props.sate.checked ? 'glb' : 'pro';
        return (
            <div className={Css['page']}>
                <div className={Css['nav']}>
                    <div className={Css['back']} onClick={() => this.goBack()}><LeftCircleTwoTone twoToneColor="#3EE0C8" style={{fontSize:'26px'}} /></div>
                    <div className={Css['product-tabs']}>
                        {
                            tabs.length > 0 ? tabs.map((item, index) => {
                                return (
                                    <div key={item.id} className={item.checked ? Css['item']+' '+Css['active'] : Css['item']} onClick={() => this.changeTab(index)}>
                                        {item.sate_name}<div className={Css['arrow']}></div>
                                    </div>
                                )
                            }) : ''
                        }
                    </div>
                </div>
                <div className={Css['main']}>
                    { 
                        products[bChecked] && products[bChecked].length > 0 ?  
                        <React.Fragment>
                            <div className={Css['title']}>{products[bChecked][0].data_time}时次</div>
                            <div className={Css['img']}><img src={products[bChecked][0].path} alt='loading' /></div>
                        </React.Fragment>
                        : <div className='null-item'><img src={require('../../../assets/images/common/empty.png')} alt="loading" />暂无数据</div>
                    }
                </div>
            </div>
        )
    }
}

export default connect((store) => {
    return store;
})(ClassifyIndex);